* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  & a {
    text-decoration: none;
    color: black;
  }
}

// 内容
.equip {
  background-color: #F4F4F4;
  width: 100%;
  height: 100%;

  // 搜索
  .searchbox {
    width: 100%;
    margin: auto;
    padding: 2% 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    .sleft {
      width: 14%;
      text-align: center;
      overflow: hidden;

      & img {
        max-width: 100%;
      }
    }

    .scenter {
      width: 70%;
      background-color: #5C7BDA;
      display: flex;
      align-items: center;
      border-radius: 10px;

      .camer {
        width: 80%;
        height: 80%;
        display: flex;
        background-color: #5C7BDA;
        padding: 0 0.8%;
        box-sizing: border-box;


        .scinput {
          width: 100%;
          font-size: 2.2em;
          border: none;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
        }

        & img {
          max-width: 100%;
          background-color: white;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          padding-right: 3%;
          box-sizing: border-box;
          cursor: pointer;
        }
      }

      .scbut {
        width: 20%;
        border: none;
        background-color: #5C7BDA;
        cursor: pointer;

        & img {
          max-width: 100%;
          background-color: #5C7BDA;
        }
      }
    }

    .sright {
      width: 10%;
      margin-left: 2%;
      margin-right: 5%;
      padding: 0 0.6%;
      box-sizing: border-box;
      border: solid 1px #DEDEDE;
      box-shadow: 2px 2px 3px #DEDEDE;
      display: flex;
      align-items: center;
      transition: box-shadow 0.4s ease;
      overflow: hidden;


      .shop {
        transition: all 1.5s;
        & img {
          max-width: 100%;
        }
      }
      .shop:hover{
        transform: scale(1.2);
      }

      .shoptit {
        color: #5C7BDA;
        font-size: 1.8em;
      }
    }
    .sright:hover{
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
    }
  }

  // 搜索
  // 第二层
  .equipnav {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;

    .navlist {
      width: 16%;
      background-color: #D3DAEE;
      padding: 2% 1%;
      box-sizing: border-box;

      .listtit {
        font-size: 2em;
        text-align: center;
        font-weight: 400;
        color: #647CC1;
      }

      .food {
        display: flex;
        align-items: center;
        margin-top: 14%;

        & img {
          max-width: 100%;
          margin-right: 10%;
        }

        .foodtit {
          font-size: 1.2em;
          color: black;
          & a{
            text-decoration: none;
          }
        }
      }

      .morebox {
        text-align: center;

        .content {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.5s ease-out;
        }

        .more {
          font-size: 1.2em;
          color: #999CAB;
        }

        .arrow {
          color: #999CAB;
          cursor: pointer;
        }
      }
    }

    .navswiper {
      width: 50%;
    }

    .navshop {
      width: 12%;
      overflow: hidden;

      .shopimg {
        width: 100%;
        transition: all 1.5s;

        & img {
          max-width: 100%;
        }
      }
      .shopimg:hover { 
        transform: scale(1.2);
      }
    }

    .navright {
      width: 8%;
      border: solid 1px #E2E2E2;
      box-shadow: 2px 2px 6px #E2E2E2;
      padding: 2% 2%;
      box-sizing: border-box;
      text-align: center;
      transition: box-shadow 1.2s ease;

      .navrbox {
        & p {
          font-size: 2em;
          padding: 22% 0;
          border-bottom: solid 2px #8E8E8E;

          & a {
            color: black;
          }
        }

        & p a:hover {
          color: #6381DC;
          cursor: pointer;
        }
      }
    }
    .navright:hover{
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
    }
  }

  // 第二层
  // 营地秒杀
  .killbox {
    width: 90%;
    margin: auto;
    margin-top: 3%;
    display: flex;

    .kill {
      width: 20%;
      background-color: #DF2A1F;
      padding: 3% 3%;
      text-align: center;
      color: white;
      overflow: hidden;

      .killtit {
        font-size: 2.6em;
        font-weight: bold;
      }

      .killimg {
        transition: all 1.5s;
        & img {
          max-width: 100%;
        }
      }
      .killimg:hover{
        transform: scale(1.2);
      }

      .killtime {
        font-size: 1.4em;

        & span {
          font-weight: bold;
        }
      }

      .killdata {
        margin-top: 10%;
        font-size: 2.2em;

        & span {
          background-color: black;
          font-weight: bold;
        }
      }
    }

    .killswiper {
      width: 80%;
      overflow: hidden;
      background-color: white;


      .tent {
        width: 28%;
        text-align: center;
        border-right: solid 1px #E3E3E3;
        overflow: hidden;

        .tentimg {
          transition: all 1.5s;
          & img {
            max-width: 100%;
            height: 280px;
          }
        }
        .tentimg:hover{
          transform: scale(1.2);
        }

        .tenttit {
          font-size: 1.8em;
          overflow: hidden; /*隐藏超出容器范围的内容*/
          text-overflow: ellipsis; /*将多余的内容省略并用省略号表示*/
          white-space: nowrap; /*防止文字换行*/
        }

        .tentbut {
          margin-top: 10%;
          padding: 0 20%;
          font-size: 1.4em;
        }
      }
    }
  }

  // 猜你喜欢
  .like {
    width: 90%;
    margin: auto;
    margin-top: 2%;

    .tit {
      margin-bottom: 2%;
      font-size: 3em;
      font-weight: bold;
      text-align: center;
      transition: text-shadow 0.3s ease;
    }
    .tit:hover{
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }

    .likecontent {
      display: flex;
      justify-content: space-between;
    
      .likeone {
        text-align: center;
        background-color: #EDDBEB;
        position: relative;
        overflow: hidden;

        .liketitbox {
          z-index: 999;
          position: absolute;
          top: 14%; /* 将小盒子的上边缘置于大盒子的中间位置 */
          left: 50%; /* 将小盒子的左边缘置于大盒子的中间位置 */
          transform: translate(-50%, -50%); /* 使用transform来水平和垂直居中 */
          .liketit {
            font-size: 2em;
            font-weight: bold;
            color: #AB60A1;
          }
          .liketit2 {
            font-size: 2em;
            font-weight: bold;
            color: #7787B5;
          }

          .liketext {
            margin-top: 6%;
            font-size: 1.6em;
            color: #5F605F;
          }
        }
        .likeimg{
          transition: all 1.5s;
          & img{
            max-width: 100%;
          }
        }
        .likeimg:hover{
          transform: scale(1.2);
        }
      }
      .liketwo {
        text-align: center;
        background-color: #EDDBEB;
        position: relative;
        overflow: hidden;

        .liketitbox {
          z-index: 999;
          position: absolute;
          top: 14%; /* 将小盒子的上边缘置于大盒子的中间位置 */
          left: 50%; /* 将小盒子的左边缘置于大盒子的中间位置 */
          transform: translate(-50%, -50%); /* 使用transform来水平和垂直居中 */
          .liketit {
            font-size: 2em;
            font-weight: bold;
            color: #AB60A1;
          }
          .liketit2 {
            font-size: 2em;
            font-weight: bold;
            color: #7787B5;
          }

          .liketext {
            margin-top: 6%;
            font-size: 1.6em;
            color: #5F605F;
          }
        }
        .likeimg{
          transition: all 1.5s;
          & img{
            max-width: 100%;
          }
        }
        .likeimg:hover{
          transform: scale(1.2);
        }
      }
      .book{
        width: 22%;
        .booktop:nth-child(1){
          background-color: white;
          padding: 0 6%;
          padding-top: 12%;
          padding-bottom: 6%;
          overflow: hidden;

          .booktitbox{
            display: flex;
            .booktit{
              font-size: 1.6em;
            }
            .bookp{
              color: #BDBDBD;
              margin-top: 4%;
              margin-left: 4%;
            }
          }
          .bookimg{
            width: 100%;
            transition: all 1.5s;
            & img{
              max-width: 100%;
            }
          }
          .bookimg:hover{
            transform: scale(0.8);
          }
        }
        .booktop:nth-child(2){
          background-color: white;
          padding: 0 6%;
          padding-top: 12%;
          padding-bottom: 8%;
          margin-top: 6%;
          overflow: hidden;
          .booktitbox{
            display: flex;
            .booktit{
              font-size: 1.6em;
            }
            .bookp{
              color: #BDBDBD;
              margin-top: 4%;
              margin-left: 4%;
            }
          }
          .bookimg{
            width: 100%;
            margin-top: 6%;
            transition: all 1.5s;
            & img{
              max-width: 100%;
            }
          }
          .bookimg:hover{
            transform: scale(0.8);
          }
        }
        // 鞋
        .shoetop{
          width: 100%;
          height: 49.6%;
          margin-bottom: 6%;
          background-color: white;
          padding: 14% 6%;
          box-sizing: border-box;
          overflow: hidden;
          .shoetitbox{
            display: flex;
            .shoetit{
              font-size: 1.6em;
            }
            .shoep{
              color: #BDBDBD;
              margin-top: 4%;
              margin-left: 4%;
            }
          }
          .shoeimg{
            width: 100%;
            transition: all 1.5s;
            & img{
              max-width: 100%;
            }
          }
          .shoeimg:hover{
            transform: scale(0.8);
          }
        }
      }
    }
  }
}

// 内容
// 响应769px
@media screen and (max-width:769px) {
  .equip {
    .searchbox {
      display: none;
    }

    .equipnav {
      display: block;

      .navlist {
        display: none;
      }

      .navswiper {
        width: 100%;
      }

      .navshop {
        width: 100%;
        display: flex;
      }

      .navright {
        display: none;
      }
    }
    // 营地秒杀
    .killbox{
      .kill{
        padding: 3% 0.5%;
        .killtit{
          font-size: 1em;
        }
        .killtime{
          font-size: 0.6em;
        }
        .killdata{
          font-size: 0.8em;
        }
      }
      .killswiper{
        .tent{
          .tenttit{
            font-size: 0.8em;
          }
          .tentbut{
            font-size: 0.2em;
          }
          .tentimg{
            & img{
              height: 166px;
            }
          }
        }
      }
    }
    // 喜欢
    .like{
      .tit{
        font-size: 1.8em;
      }
      .likecontent{
        .likebox{
          display: none;
          }
          .likeboxtwo{
            width: 40%;
          }
        .liketwo{
          .liketitbox{
            .liketit{
              font-size: 1em;
            }
            .liketext{
              font-size: 0.6em;
            }
            .liketit2{
              font-size: 1em;
            }
          }
        }
        .book{
          width: 26%;
          .booktop:nth-child(1){
            .booktitbox{
              .booktit{
                font-size: 0.6em;
              }
              .bookp{
                font-size: 8px;
              }
            }
          }
          .booktop:nth-child(2){
            .booktitbox{
              .booktit{
                font-size: 0.6em;
              }
              .bookp{
                font-size: 8px;
              }
            }
          }
          .shoetop{
            .shoetitbox{
              .shoetit{
                font-size: 0.6em;
              }
              .shoep{
                font-size: 8px;
              }
            }
          }
        }
      }
    }
  }
}
